window.onload = function() {

  /* THIS FUNCTION SHOULD BE MOVED TO A DIFFERENT SCRIPT 
   * //Takes an array of values, and returns the quantile for a specific 
   * //value, id
   * function computeQuantile (values, id) {
   * values.sort();
   * var numberOfValues = values.length;
   * var nValuesLessThanID = 0;
   * for(var i = 0; i < numberOfValues; i++) {
   *   if(values[i] < id) {
   *	nValuesLessThanID++;
   *  } else {
   *	break;
   *  }
   * }
   *var quantile = nValuesLessThanID / numberOfValues;
   *return quantile;
   *  };
   */
  var theCanvas = document.getElementById("Canvas1");
  var ctx = theCanvas.getContext("2d");

  /*Takes an array of values and draws a histogram with bin widths = 10 */
  function drawHistogram(dataVector) {
    ctx.fillStyle = "#0000ff";
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    
    function numericOrder(a, b) {
      return a - b;
    };
    dataVector.sort(numericOrder);
    var vectorLength = dataVector.length;
    var minValue = dataVector[0];
    var valueRange = dataVector[vectorLength - 1] - minValue;
    
    var bins = valueRange/10 + 1;
    //Create an array to hold the number of values in each bin
    var binCounts = [];
    for(var i = 0; i < bins; i++) {
      binCounts[i] = 0;
    }

    //iterate through dataVector, assigning each value to its proper bin
    //to simplify subtract min value off of all values to start
    for(var i = 0; i <= vectorLength; i++) {
      dataVector[i] -= minValue;
    }
    
    for(var i = 0; i < vectorLength; i++) {
      var assignedBin = Math.floor(dataVector[i] / 10);
      binCounts[assignedBin]++;
    }
    
    //draw histogram
    //assign margin space for plotting axes, etc.
    var MARGIN = 30;
    var binWidth = (theCanvas.width - 2*MARGIN) / bins;
    var maxHeight = binCounts[0];
    for(var i = 0; i < bins; i++) {
      if(binCounts[i] > maxHeight) {
	maxHeight = binCounts[i];
      }
    }
    
    for(var i = 0; i < bins; i++) {
      //First bin will be drawn at (MARGIN, canvas.height-MARGIN), each 
      // successive one will be drawn with dx = binWidth; the height of each bin
      // is -1 * its count/maxHeight * (canvas.height - 2*MARGIN); heights are given 
      // as negative values so that they are drawn from the base upward.
      var binHeight = -1 * binCounts[i]/maxHeight * (theCanvas.height - 2*MARGIN);
      ctx.fillRect(MARGIN + i*binWidth, theCanvas.height - MARGIN, binWidth, binHeight);
      ctx.strokeRect(MARGIN + i*binWidth, theCanvas.height - MARGIN, binWidth, binHeight);
    }
    
    //Add axes
    //y-axis:
    ctx.font = "10pt Calibri";
    ctx.fillStyle = "black";
    ctx.fillText("- " + maxHeight, 0, MARGIN);
    
    //x-axis
    var min = minValue - (minValue % 10);
    for(var i = 0; i < bins; i++) {
      //starting with minValue rounded down to the nearest 10, increment values by 10, 
      // and print text under bin centers
      ctx.fillText(min + i*10, MARGIN + i*binWidth + binWidth/2, theCanvas.height - (MARGIN/2));
    }
    
    /* Used to identify a specific value with a vertical line
     *  //indicate users location:
     *  var TEXT_CENTER = 10; //offset of text to center it
     *  yourX = MARGIN + (yourBill - min) * (binWidth/10);
     *  ctx.fillText("YOU", yourX - TEXT_CENTER, MARGIN/2);
     *  ctx.beginPath();
     *  ctx.moveTo(yourX, theCanvas.height - MARGIN);
     * ctx.lineTo(yourX, MARGIN);
     * ctx.stroke();
     */
  }

  function clearCanvas() {
    ctx.clearRect(0, 0, theCanvas.width, theCanvas.height);
  }

  var inputArray = document.getElementById("histogramValues").value;
  var submitButton = document.getElementById("submitButton");

  submitButton.onclick = function() {
    inputArray = document.getElementById("histogramValues").value;
    //Split string into numeric array--split on commas (and white space)
    inputArray = inputArray.split(/\s*,\s*/); 
    clearCanvas();
    drawHistogram(inputArray);
    return false;
  };

};



